<template>
  <div class="directive-box">
    <div class="title-line list-caption mt15 ml10 relative">
      下发范围
      <div class="title-oper">
        <IconButton
          :icon="visible.issueRange ? 'fold' : 'unfold'"
          :title="visible.issueRange ? '收起' : '展开'"
          :activated="false"
          @click.native="handleModuleToggle('issueRange')"
        ></IconButton>
      </div>
    </div>
    <div class="split-line mt18 mb18"></div>

    <div ref="issueRange_ref" class="f14">
      <div class="ir-box pl20 pt20">
        <CheckboxGroup v-model="categorieValues" class="custom-checkbox-group" @on-change="handleCateCheckboxChange">
          <Checkbox v-for="(cate, i) of categories" :key="i" :label="cate.key" :disabled="viewDetails.isDetails">
            {{ cate.category }}
          </Checkbox>
        </CheckboxGroup>

        <div class="check-count text-highlight">已选中{{ receiveUnitValues.length }}个</div>
      </div>

      <div class="ir-box pl20 pt20" style="background-color: #ecf5ff">
        <div class="receive-unit">接收单位：</div>
        <CheckboxGroup v-model="receiveUnitValues" class="custom-checkbox-group">
          <Checkbox
            v-for="(unit, i) of receiveUnits"
            :key="i"
            :label="unit.key"
            class="ellipsis"
            :title="unit.value"
            :disabled="viewDetails.isDetails"
          >
            {{ unit.value }}
          </Checkbox>
        </CheckboxGroup>
      </div>
    </div>
  </div>
</template>

<script>
// request
import { getIssued_scope } from '@/api/common/IssueDirective/index.js'

export default {
  name: 'IssueRange',

  props: {
    viewDetails: Object,
  },

  data() {
    return {
      formData: {
        scopeCategory: '', // 下发范围类型 key
        scopeType: '', // 下发范围类型,wxb,site type
        targets: '', // 下发目标,多个使用逗号分隔 子项的 key
      },

      categorieValues: [],

      receiveUnitValues: [],
      receiveUnits: [],

      allData: {},

      visible: {
        issueRange: true,
      },
    }
  },

  computed: {
    from() {
      return this.$route.query.f
    },

    categories() {
      return this.allData.categories || []
    },
  },

  watch: {
    viewDetails: {
      handler(v) {
        if (!v.isDetails) return
        const { scopeCategory = '', targets = [] } = v.info
        this.categorieValues = scopeCategory.split(',')
        /* setReceiveUnits 执行后，接收单位有值再去渲染 */
        this.$nextTick(() => {
          this.receiveUnitValues = targets
        })
      },
      deep: true,
    },

    categorieValues() {
      this.setReceiveUnits()
    },
  },

  methods: {
    handleModuleToggle(module) {
      this.$parent.moduleHeightToggle(this, module)
    },

    handleCateCheckboxChange(value) {
      this.receiveUnitValues = []
      if (this.categorieValues.length > 1) {
        this.categorieValues.shift()
      }

      this.categorieValues.forEach((cate) => {
        const findVal = this.categories.find((it) => it.key === cate)
        if (!findVal) return
        this.$nextTick(() => {
          ;(findVal.list || []).forEach((item) => this.receiveUnitValues.push(item.key))
        })
      })
    },

    /* 接收单位 网信办为地区 其他都是网站 */
    setReceiveUnits() {
      const { allRegions = [], allSites = [] } = this.allData
      this.receiveUnits = this.categorieValues.includes('WXB') ? allRegions : allSites
    },

    getParams() {
      const scopeCategory = []
      const scopeType = []
      this.categorieValues.forEach((cateVal) => {
        const v = this.categories.find((it) => it.key === cateVal)
        scopeCategory.push(v.key)
        scopeType.push(v.type)
      })
      return {
        scopeCategory: scopeCategory.join(','),
        scopeType: scopeType.join(','),
        targets: this.receiveUnitValues.join(','),
      }
    },

    validator() {
      return this.receiveUnitValues.length
    },

    /* 查询下发范围 */
    async getIssued_scope() {
      const res = await getIssued_scope()
      const data = res.data.data || {}
      this.allData = data
      this.setReceiveUnits()
    },
  },

  mounted() {
    this.getIssued_scope()
  },
}
</script>

<style lang="less" scoped>
.ir-box {
  position: relative;
  width: 80%;
  margin: auto;

  .check-count {
    position: absolute;
    right: -75px;
    top: 0;
  }

  .receive-unit {
    position: absolute;
    left: -75px;
    top: 20px;
  }
}
.custom-checkbox-group {
  /deep/ .ivu-checkbox-wrapper {
    width: 24%;
    margin-bottom: 20px;
  }
}
</style>
